/*
* @Author: karry
* @Date:   2019-08-04 12:58:43
* @Last Modified by:   karry
* @Last Modified time: 2019-08-04 12:58:43
*/
import React 	 from 'react';

class ListSearch extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			searchType 		: 'productId',
			searchKeyword 	: ''
		}
	}
	// 数据变化的时候
	onValueChange(e){
		let name  = e.target.name,
			value = e.target.value.trim();
		this.setState({
			[name] : value
		}); 
	}
	// 点击搜索按钮的时候
	onSearch(){
		this.props.onSearch(this.state.searchType, this.state.searchKeyword);
	}
	// 输入关键字后按回车，自动提交
	onSearchKeywordKeyUp(e){
		if( e.keyCode === 13 ){
			this.onSearch();
		}
	}
	render(){
		return(
			<div>
				<div className="col-md-12 search-wrap">
					<div className="form-inline">
					  	<div className="form-group">
					    	<select name="searchType" className="form-control" 
					    		onChange= { (e) => this.onValueChange(e)} >
								<option value="productId">按商品ID查询</option>
								<option value="productName">按商品名称查询</option>
					    	</select>
					  	</div>
					  	<div className="form-group">
					    	<input type="text" name="searchKeyword" 
					    		className="form-control"
					    		placeholder="关键词" 
					    		onKeyUp={ (e) => this.onSearchKeywordKeyUp(e) } 
					    		onChange= { (e) => this.onValueChange(e)} /> 
					  	</div>
					  	<button className="btn btn-primary" onClick={ (e) => this.onSearch()}>搜索</button>
					</div>
				</div>
			</div>
		)
	}
}

export default ListSearch;